<template>
  <div>
    <el-table :data="processedData" style="width: 100%">
      <el-table-column label="ID" prop="Id" :min-width="40"></el-table-column>
      <el-table-column
        label="名称"
        prop="name"
        :min-width="80"
      ></el-table-column>
      <el-table-column
        label="价格"
        prop="cost"
        :min-width="50"
      ></el-table-column>
      <el-table-column
        label="生产厂家"
        prop="producers"
        :min-width="80"
      ></el-table-column>
      <el-table-column
        label="生产厂家联系方式"
        prop="phone"
        :min-width="80"
      ></el-table-column>
      <el-table-column
        label="生产厂家代码"
        prop="producers_id"
        :min-width="50"
      ></el-table-column>
      <el-table-column
        label="品类"
        prop="cate_id"
        :min-width="60"
      ></el-table-column>
      <el-table-column label="Image">
        <template slot-scope="scope">
          <el-image
            style="width: 120px; height: 120px"
            :src="scope.row.image"
            fit="cover"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="Operation" :min-width="120">
        <template slot-scope="scope">
          <div style="display: flex; justify-content: center">
            <el-button
              @click="openDialog(scope.$index)"
              type="primary"
              style="margin-right: 10px"
              >修改</el-button
            >
            <el-button type="danger" @click="deleteItem(scope.row.Id)"
              >删除</el-button
            >
          </div>
          <el-dialog
            title="修改"
            :visible.sync="dialogVisible[scope.$index]"
            width="30%"
            center
          >
            <good-form
              :tableForm="tableForm"
              :subShow="true"
              :upDataId="scope.row.Id"
              @child-button-click="closeDialog(scope.$index)"
            ></good-form>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getallproducts, deleteproduct } from "../api/data";
import GoodForm from "./GoodForm.vue";
export default {
  name: "GoodsTable",
  components: {
    GoodForm,
  },
  props: {
    dataObject: {
      type: Array, // 确保正确指定数据类型为对象
      required: true,
    },
  },
  data() {
    return {
      tableForm: {
        id: "",
        name: "",
        producers: "",
        cate_id: "",
        producers_id: "",
        phone: "",
        cost: "",
        image: null,
      },
      processedData: [],
      newProduct: [],
      dialogVisible: {}, // 使用对象来存储每个行的对话框状态
    };
  },
  methods: {
    deleteItem(ID) {
      deleteproduct(ID).then((res) => {
        if (res.status === 200) {
          this.getnewList();
        }
      });
    },
    closeDialog(index) {
      this.$set(this.dialogVisible, index, false);
    },
    openDialog(index) {
      this.$set(this.dialogVisible, index, true); // 使用 Vue.set 来确保视图更新
    },
    getnewList() {
      getallproducts().then((res) => {
        if (res.status === 200) {
          let stringToDelete = "uploads/";
          let baseUrl = "http://127.0.0.1:3002/";
          let newArr = res.data.map((item) => {
            return {
              ...item,
              image: baseUrl + item.img.replace(stringToDelete, ""), // 处理图片路径
            }; // 提取name属性并转换为大写形式
          });
          this.processedData = newArr;
        }
      });
    },
    processData() {
      let stringToDelete = "uploads/";
      let baseUrl = "http://127.0.0.1:3002/";
      const newArr = this.dataObject.map((item) => {
        return {
          ...item,
          image: baseUrl + item.img.replace(stringToDelete, ""), // 处理图片路径
        };
      });
      return newArr;
    },
  },
  created() {
    this.getnewList();
  },
};
</script>

<style>
/* 自定义按钮样式 */
.el-button {
  margin-right: 10px;
}
</style>